<html>
    <head>
        <title>Itowns - Orientation utils example in planar</title>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/loading_screen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv"></div>
        <script src="../dist/itowns.js"></script>
        <script src="js/proj4defs/2154.js"></script>
        <script src="js/loading_screen.js"></script>
        <script src="js/ThreeLoader.js"></script>
        <script type="text/javascript">
            var extent;
            var viewerDiv;
            var view;
            var meshes;

            var extent = new itowns.Extent(
                'EPSG:3857',
                -20037508.342789, 20037508.342789,
                -20037508.342789, 20037508.342789);

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            viewerDiv = document.getElementById('viewerDiv');

            // Instanciate PlanarView*
            view = new itowns.PlanarView(viewerDiv, extent, { maxSubdivisionLevel: 17 });
            setupLoadingScreen(viewerDiv, view);
            view.tileLayer.disableSkirt = true;

            itowns.Fetcher.json('./layers/JSONLayers/OPENSM.json').then(function _(config) {
                config.source = new itowns.TMSSource(config.source);
                var layer = new itowns.ColorLayer(config.id, config);
                view.addLayer(layer);
            });

            view.camera.camera3D.position.set(259880, 6249400, 40);

            // eslint-disable-next-line no-new
            new itowns.PlanarControls(view, {
                // We do not want the user to zoom out too much
               maxAltitude: 40000000,
                // We want to keep the rotation disabled, to only have a view from the top
                enableRotation: true,
                // Faster zoom in/out speed
               zoomInFactor: 0.5,
               zoomOutFactor: 0.5,
                // Don't zoom too much on smart zoom
               smartZoomHeightMax: 100000,
            });

            // Input data : a geoJson file, with point features, with orientation specific properties
            var panoramics = 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/immersive/exampleParis1/panoramicsMetaDataParis.geojson';
            var layer = {
                crsOut: view.referenceCrs,
                mergeFeatures: false,
            };

            // Add a promise to load oriented point datas
            var promises = [];
            promises.push(
                // first parse the JSON format
                itowns.Fetcher.json(panoramics, {})
                // then get geographic informations (coordinates) using GeoJson parser
                .then(function parseGeoJSON(orientations) { return itowns.GeoJsonParser.parse(orientations, layer);})
            );

            // load collada model of a renault trafic
            promises.push(ThreeLoader.load('Collada',
             'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/models/collada/renault_trafic_no_texture.dae')
             .then(function prepareModel(collada) {
                // prepare collada model base scale and rotation. in this example, we want the car to go straigth.
                var colladaModel = collada.scene;
                colladaModel.scale.set(0.5, 0.5, 0.5);
                colladaModel.rotateZ(-Math.PI / 2 );
                // put the model in a group, to allow user to do other transformation (rotation..)
                var group = new itowns.THREE.Group();
                group.add(colladaModel);
                return group;
             }));

            // wait for all the promises
            Promise.all(promises).then(function loadFeaturesModel(res) { loadFeatures(res[0], res[1]);});

            // place a 3d model oriented for each feature
            function loadFeatures(collection, colladaModel) {

                for (const feature of collection.features) {

                    // clone the collada model
                    var model = colladaModel.clone();
                    var vertices = feature.vertices;

                    // get coordinate from point feature
                    var coord = new itowns.Coordinates(feature.crs, vertices[0], vertices[1], vertices[2]);

                    // set model position to the ground
                    var position = coord.xyz();
                    position.z = 0;
                    model.position.copy(position);

                    // set model orientation (quaternion is the target parameter)
                    itowns.OrientationUtils.quaternionFromAttitude(feature.geometry[0].properties, undefined, false, model.quaternion);

                    model.updateMatrixWorld();
                    view.scene.add(model);
                }
                view.notifyChange(undefined);
            }
        </script>
    </body>
</html>
